<template>
    <div class="temp-btns2">
        <div>
            <div class="btn" :class="{ active: hs && yyFuncBtnType == 'YZSJ' }" @click="onPlanHS">预置视角</div>
        </div>

        <div class="openRoam_diong" v-if="openRoamdiong && yyFuncBtnType == 'YZSJ'">
            <div class="openRoam_head">
                <span> 预置视角切换 </span>
                <span> <i class="el-icon-error close" @click="openRoamClone"></i> </span>
            </div>
            <div class="openRoam_body">
                <div class="openRoam_ul">
                    <div class="openRoam_li">
                        <label>
                            <img src="@/assets/map/openRoam/jiantou.png" alt="">
                            <!-- <a> L1 </a> -->
                        </label>
                        <ul>
                            <li v-for="item in options.L1" :key="item.lat" :label="item.name" :value="item.lat"
                                :class="RoambtnType == item.name ? 'ta' : ''" @click="onPlanHSAlpha(item)">
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div class="openRoam_li" v-if="options.L2.length > 0">
                        <label>
                            <img src="@/assets/map/openRoam/jiantou.png" alt="">
                            <!-- <a> L2 </a> -->
                        </label>
                        <ul>
                            <li v-for="item in options.L2" :key="item.lat" :label="item.name" :value="item.lat"
                                :class="RoambtnType == item.name ? 'ta' : ''" @click="onPlanHSAlpha(item)">
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                    <div class="openRoam_li">
                        <label>
                            <img src="@/assets/map/openRoam/jiantou.png" alt="">
                            <!-- <a> L3 </a> -->
                        </label>
                        <ul>
                            <li v-for="item in options.L3" :key="item.lat" :label="item.name" :value="item.lat"
                                :class="RoambtnType == item.name ? 'ta' : ''" @click="onPlanHSAlpha(item)">
                                {{ item.name }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script >
import { callUIInteraction } from '@/PixelStreaming/webrtcVideo.js'
export default {
    name: 'dataTab',
    data() {
        return {
            hs: false,
            btnName: '',
            btnType: '',
            btn: '',
            options: [],
            b3dmBasin: {
                'WDC2100129000001': {
                    L1: [
                        { name: '全景', url: '', lon: 114.58995, lat: 24.487702, h: 500 },
                        { name: '流域上游', url: '', lon: 114.587336, lat: 24.486055, h: 500 },
                        { name: '流域漫游', url: '', lon: 114.587336, lat: 24.486055, h: 500 },
                    ],
                    L2: [
                        { name: '上坪镇中心幼儿园', url: '', lon: 114.58995, lat: 24.487702, h: 500 },
                        { name: '上坪镇政府', url: '', lon: 109.992, lat: 34.149, h: 500 },
                        { name: '新陂村', url: '', lon: 109.892, lat: 34.184, h: 500 },
                    ],
                    L3: [
                        { name: '上坪镇水文站', url: '', lon: 114.572691, lat: 24.453249, h: 500 },
                    ],
                },
                'WDC2100129000006': {
                    L1: [
                        { name: '全景', url: '', lon: 114.58995, lat: 24.487702, h: 500 },
                        { name: '流域出口', url: '', lon: 114.587336, lat: 24.486055, h: 500 },
                        // { name: '流域上游', url: '', lon: 114.58995, lat: 24.487702, h: 500 },
                        { name: '流域漫游', url: '', lon: 114.587336, lat: 24.486055, h: 500 },
                    ],
                    L2: [
                        // { name: '流域漫游', url: '', lon: 114.587336, lat: 24.486055, h: 500 },
                    ],
                    L3: [
                        { name: '翁源县人民政府', url: '', lon: 114.58995, lat: 24.487702, h: 500 },
                        { name: '翁源中学', url: '', lon: 114.587336, lat: 24.486055, h: 500 },
                        { name: '龙仙中学', url: '', lon: 114.591167, lat: 24.493467, h: 500 },
                    ],
                }
            },
            roamOptions: [],
            RoambtnType: '',//预置视角按钮类型
            openRoamdiong: false,
        }
    },
    computed: {
        // 流域编码
        basin() {
            return this.$store.getters.basin
        },
        yyFuncBtnType() {
            return this.$store.getters.yyFuncBtnType
        }
    },
    watch: {
        basin: {
            handler: function (name) {
                this.options = this.b3dmBasin[this.basin]
            },
            immediate: true
        },
        yyFuncBtnType(val) {
            if (val == 'YZSJ') {
                this.openRoamdiong = true
                this.hs = true
            } else {
                this.openRoamdiong = false
                this.hs = false
            }
        }
    },
    beforeDestroy() {
        this.$eventBus.$emit('closeLayer', 'WATAM')
        this.$eventBus.$emit('closeLayer', 'WATA')
        this.$eventBus.$emit('closeLayer', 'HL')
        this.$eventBus.$emit('closeLayer', 'FZC')
        this.$eventBus.$emit('closeLayer', 'FZC')
        this.$eventBus.$emit('closeLayer', 'QSYDW')
        this.$eventBus.$emit('closeLayer', 'QL')
        this.$eventBus.$emit('closeLayer', 'LSHH')
        this.$eventBus.$emit('closeLayer', 'ZDJCZ')
    },
    created() {
        // 初始化下拉列表
        this.options = this.b3dmBasin[this.basin]
        console.log(" this.options", this.options);
    },
    methods: {
        onPlanHS() {
            this.hs = !this.hs
            this.btnName = 'sjdb'
            this.btn = ''
            this.openRoamdiong = !this.openRoamdiong
            if (this.openRoamdiong) {
                this.$store.commit("YYFUCBTNTYPE", 'YZSJ');
            } else {
                this.$store.commit("YYFUCBTNTYPE", '');
            }
        },
        //L1
        onPlanHSL1() {
            this.btnNametype = ''
            this.btnType = 'L1'
            this.hs = false;
            this.setCameraPos(114.591809, 24.484856, 50000, -90);
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": 'L1'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);
        },
        //L2
        onPlanHSL2() {
            this.btnNametype = ''
            this.btnType = 'L2'
            this.hs = false;
            this.setCameraPos(114.586809, 24.487706, 200, -20);
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": 'L2'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);
        },
        //L3
        onPlanHSL3() {
            this.btnNametype = ''
            this.btnType = 'L3'
            console.log('点击了L3');
        },

        //漫游
        openRoam() {
            this.btnNametype = ''
            this.btnType = 'openRoam'
            this.hs = false;
            this.openRoamdiong = true
            console.log('点击了漫游');
        },
        openRoamClone() {
            this.hs = false;
            this.openRoamdiong = false
        },
        //环视
        onPlanToHS() {
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": '环视'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);
            //     if (this.hs) {
            //         var eventFn = (pickedObject, position) => {
            //             const cartesian = this.$viewer.scene.globe.pick(this.$viewer.camera.getPickRay(position), this.$viewer.scene)
            //             // 世界坐标转换为弧度
            //             const ellipsoid = this.$viewer.scene.globe.ellipsoid
            //             const cartographic = ellipsoid.cartesianToCartographic(cartesian)
            //             // 弧度转换为经纬度
            //             const lon = Cesium.Math.toDegrees(cartographic.longitude) // 经度
            //             const lat = Cesium.Math.toDegrees(cartographic.latitude) // 纬度

            //             console.log('点击的的经纬度坐标是：', {
            //                 '经度：': lon,
            //                 '纬度：': lat
            //             })
            //             this.centerPosition = [lon, lat, 1000]
            //             this.getCenter()
            //         }
            //         this.$store.getters.eventCesiumOption.leftPickFns.set('环视取点', eventFn)
            //     } else {
            //         this.stopRotate()
            //     }
        },
        // L1 L2 L3
        onPlanHSAlpha(res) {
            this.RoambtnType = res.name
            this.hs = false;
            switch (res.name) {
                case '全景':
                    this.$eventBus.$emit('openLayer', 'WATAM')
                    this.$eventBus.$emit('openLayer', 'WATA')
                    this.$eventBus.$emit('openLayer', 'HL')
                    this.$eventBus.$emit('openLayer', 'FZC')
                    break;
                case '流域漫游':
                    this.$eventBus.$emit('openLayer', 'FZC')
                    this.$eventBus.$emit('openLayer', 'QSYDW')
                    this.$eventBus.$emit('openLayer', 'QL')
                    this.$eventBus.$emit('openLayer', 'LSHH')
                    this.$eventBus.$emit('openLayer', 'ZDJCZ')
                    break;
                case '流域上游':
                    this.$eventBus.$emit('openLayer', 'FZC')
                    this.$eventBus.$emit('openLayer', 'QSYDW')
                    this.$eventBus.$emit('openLayer', 'QL')
                    this.$eventBus.$emit('openLayer', 'LSHH')
                    break;
                case '流域出口':
                    this.$eventBus.$emit('openLayer', 'FZC')
                    this.$eventBus.$emit('openLayer', 'QSYDW')
                    this.$eventBus.$emit('openLayer', 'QL')
                    this.$eventBus.$emit('openLayer', 'LSHH')
                    break;
                case '上坪镇中心幼儿园':
                    this.$eventBus.$emit('openLayer', 'QSYDW')
                    break;
                default:
                    this.$eventBus.$emit('closeLayer', 'WATAM')
                    this.$eventBus.$emit('closeLayer', 'WATA')
                    this.$eventBus.$emit('closeLayer', 'HL')
                    this.$eventBus.$emit('closeLayer', 'FZC')
                    this.$eventBus.$emit('closeLayer', 'FZC')
                    this.$eventBus.$emit('closeLayer', 'QSYDW')
                    this.$eventBus.$emit('closeLayer', 'QL')
                    this.$eventBus.$emit('closeLayer', 'LSHH')
                    this.$eventBus.$emit('closeLayer', 'ZDJCZ')
                    break;
            }
            var param = {
                "eventName": "ButtonClickRoam",  // 事件名称
                "RoamType": res.name     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickRoam", param);
        },
        setCameraPos(lon, lat, h, pitch) {
            this.$viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(lon, lat, h),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
                    pitch: Cesium.Math.toRadians(pitch), // default value (looking down)
                    roll: 0.0 // default value
                }
            })
        }
    }


}
</script>

<style lang="less" scoped>
.temp-btns2 {
    position: fixed;
    top: 9px;
    right: 270px;
    height: 50px;
    display: flex;
    align-items: center;
    pointer-events: auto;
    z-index: 21;

    .btn {
        //min-width: 120px;
        height: 40px;
        background: url('~@/assets/imgNew/btnbg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        padding: 5px 20px;
        margin: 5px 8px;
        font-size: 18px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        color: #D0DDF1;

        &:hover,
        &.active {
            background: url('~@/assets/imgNew/btnactbg.png') no-repeat;
            background-size: 100% 100%;
        }

        &.btnSelf {
            margin: 0;
            background: none;
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            width: 100%;
        }

        &.btnSelf:hover,
        &.btnSelf.active {
            background: rgba(0, 44, 111, 0.7);
            border-radius: 4px;
        }

        &.addAlpha {
            position: absolute;
            right: 0px;
            top: 40px;
        }

        &.hongWater {
            position: absolute;
            right: 0px;
            top: 70px;
        }

        &.addHeat {
            position: absolute;
            right: 0px;
            top: 100px;
        }

        &.addRian {
            position: absolute;
            right: 0px;
            top: 130px;
        }
    }

    .box {
        position: absolute;
        top: 52px;
        left: 7px;
        background: rgba(0, 102, 255, 0.6);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #00D2FF;
    }

    .box1 {
        position: absolute;
        top: 80px;
        right: -190px;
        background: rgba(0, 102, 255, 0.6);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #00D2FF;
    }

    .box2 {
        position: absolute;
        top: 52px;
        right: 5px;
        background: rgba(0, 102, 255, 0.6);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #00D2FF;
        width: 110px;
    }

    .box3 {
        position: absolute;
        top: 118px;
        right: -118px;
        background: rgba(0, 102, 255, 0.6);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #00D2FF;
    }

}

.openRoam_diong {
    position: fixed;
    top: 60px;
    right: 1%;
    width: 512px;
    height: 216px;
    background: url('~@/assets/map/openRoam/waikuang.png') no-repeat;
    background-size: 100% 100%;

    .openRoam_head {
        width: 100%;
        height: 37px;
        padding: 0 2%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            i {
                font-size: 24px;
                color: #00FFFF;
            }
        }
    }

    .openRoam_body {
        width: 100%;
        padding: 0 1% 0 3%;

        .openRoam_ul {
            padding-top: 2%;

            .openRoam_li {
                display: flex;

                label {
                    width: 70px;
                    padding-top: 10px;
                }

                ul {
                    width: 100%;
                    display: flex;
                    // justify-content: space-between;
                    flex-wrap: wrap;

                    li {
                        width: 31%;
                        margin-right: 1%;
                        height: 35px;
                        line-height: 35px;
                        margin-bottom: 12px;
                        text-align: center;
                        background: #0149AC;
                        border: 1px solid #00BAFF;
                        border-radius: 6px;
                        cursor: pointer;
                    }

                    .ta {
                        box-shadow: inset 0px 0px 12px rgba(0, 150, 255, 0.6);
                        position: relative;
                        background: rgba(0, 150, 255, 0.6);
                        border: 1px solid #00D2FF;
                        border-radius: 4px;
                    }

                    .ta::after {
                        content: " ";
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        background-image: url('~@/assets/dialog/selected.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        width: 20px;
                        height: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    li:hover {
                        background: rgba(0, 150, 255, 0.6);
                        border: 1px solid #00D2FF;
                        border-radius: 4px;
                        box-shadow: inset 0px 0px 12px rgba(0, 150, 255, 0.6);
                    }


                }
            }
        }
    }

}
</style>
